//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from "vue-router"
import { constantRoute } from "./routes"
import Layout from "@/layout/index.vue"

//创建路由器
const router = createRouter({
    //路由模式hash
    history: createWebHashHistory(),
    routes: constantRoute,
    //滚动行为
    scrollBehavior() {
        return {
            left: 0,
            top: 0,
        }
    },
})
export default router

// 匹配views里面所有的.vue文件
const modules = import.meta.glob("./../views/**/*.vue")

/**
 * 使用条件：
 * 1. routers 中的数据都是插在 layout 主题的菜单下面，不存在单独的没有主题的菜单比如 /login 这种
 * 2. 插入的菜单中不存在外链
 *
 * 该函数主要是将 routers 转化成 一个可以插入 vue-router 路由表的数组，转换之后的数据不会存在层级关系
 */
export function createRouters(routers: any) {
    let newRouter
    const _createRouters = (routers: any, path: string = "") => {
        let newRouterList: any[] = []
        // 遍历
        routers.forEach((item: any) => {
            if (item.hidden) return
            let routerItem: any
            // 没有孩子就添加到路由表中
            if (item.component) {
                if (item.component == "layout/index") {
                    routerItem = {
                        path: joinPath(path, item.path),
                        component: Layout,
                    }
                } else {
                    routerItem = {
                        path: joinPath(path, item.path),
                        component: loadView(item.component),
                    }
                }
            }
            // 有孩子
            if (item.children) {
                routerItem.children = _createRouters(item.children, item.path)
            }
            newRouterList.push(routerItem)
        })
        return newRouterList
    }
    newRouter = _createRouters(routers)
    console.log("新构建的路由表", newRouter)
    return newRouter
}

export function createMenuLists(routers: any) {
    let newMenuList: any[]
    const _createMenuLists = (routers: any, path: string = "") => {
        const menuList: any[] = []
        // 遍历
        routers.forEach((item: any) => {
            if (item.hidden) return
            let menuItem = null
            // 有孩子
            if (item.children) {
                menuItem = {
                    name: item.name,
                    path: joinPath(path, item.path),
                    meta: item.meta,
                    children: _createMenuLists(item.children, item.path),
                }
            } else {
                menuItem = {
                    name: item.name,
                    path: joinPath(path, item.path),
                    meta: item.meta,
                }
            }
            menuList.push(menuItem)
        })
        return menuList
    }
    newMenuList = _createMenuLists(routers)
    console.log("新构建的菜单列表 newMenuList", newMenuList)
    return newMenuList
}

export const loadView = (view: string) => {
    let res
    for (const path in modules) {
        const dir = path.split("views/")[1].split(".vue")[0]
        if (dir === view) {
            res = () => modules[path]()
        }
    }
    return res
}

/**
 * 两个路由 path 进行拼接
 */
export function joinPath(basePath: string, path: string) {
    if (basePath.endsWith("/")) {
        basePath = basePath.slice(0, -1)
    }
    if (path.startsWith("/")) {
        path = path.slice(1)
    }
    return basePath + "/" + path
}
